import { Button as AntdButton } from "antd";
import { CommonComponentProps } from "@/pages/lowCodeEditorPlus/interface";
import { useDrag } from "react-dnd";
import { useSetMaterialStylesheet } from "@/pages/lowCodeEditorPlus/hooks/useSetMaterialStylesheet";

const Button = ({
  id,
  name,
  type,
  text,
  size,
  color,
  variant,
  styles,
  customClassStyle,
  containerUnitType,
}: CommonComponentProps) => {
  const [_, drag] = useDrag({
    type: name,
    item: {
      type: name,
      dragType: "move",
      id,
      containerUnitType,
    },
  });
  useSetMaterialStylesheet(id);
  return (
    <AntdButton ref={drag} data-component-id={id} size={size} color={color} variant={variant} style={styles}>
      {text}
    </AntdButton>
  );
};

export default Button;
